.nom-cascader {
  &.p-label-align-right>.nom-field-label+.nom-field-content {
    width: 0;
  }

  >.nom-field-content {
    .nom-control {
      &:not(.s-disabled):hover {
        border: 1px solid var(--nom-color-primary);
      }

      position: relative;
      min-height: @input-height-base;
      padding: @padding-y-base 24px @padding-y-base 12px;
      color: var(--nom-text-color) !important;
      line-height: @line-height-computed;
      background: var(--nom-bg-color);
      border: 1px solid var(--nom-border-color);
      border-radius: var(--nom-border-radius);
      cursor: pointer;

      .nom-cascader-content {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .nom-cascader-icon {
        position: absolute;
        top: 0;
        right: 8px;
        bottom: 0;
      }

      .nom-cascader-placeholder {
        color: var(--nom-input-placeholder-color);
      }

      .s-disabled& {
        background-color: var(--nom-input-bg-disabled);
        cursor: not-allowed !important;
        opacity: 1;
      }
    }
  }
}


.nom-cascader-popup {
  overflow: hidden;
}

.nom-cascader-popup>.nom-layout {
  max-height: 300px;

  &.nom-cascader-pop-container {
    display: block;
  }

  >.nom-layout-body {
    overflow-x: hidden;

    .nom-cascader-menu {
      display: inline-block;
      min-width: 111px;
      // height: 250px;
      margin: 0;
      padding: 0;
      overflow: auto;
      overflow-x: hidden;
      overflow-y: auto;
      white-space: nowrap;
      vertical-align: top;
      list-style: none;
      border-right: 1px solid var(--nom-border-color);
      transition: all .3s;

      &:last-child {
        border-right: none;
      }

      >.nom-cascader-menu-item {
        &:hover {
          cursor: pointer;
          .nom-preset-hover;
        }

        &.nom-cascader-menu-item-active {
          .nom-preset-primary;
        }

        &.nom-cascader-menu-item-disabled{
          color:rgba(0,0,0,0.25);
          cursor:not-allowed;
          user-select: none;
        }

        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;

        >.nom-cascader-menu-item-expand-icon {
          padding-left: 1rem;
        }
      }
    }
  }
}

.nom-cascader-animate-top-show {
  -webkit-animation: nom-cascader-keyframe-top-show .16s linear forwards;
  animation: nom-cascader-keyframe-top-show .16s linear forwards;
}

.nom-cascader-animate-bottom-show {
  -webkit-animation: nom-cascader-keyframe-bottom-show .16s linear forwards;
  animation: nom-cascader-keyframe-bottom-show .16s linear forwards;
}

.nom-cascader-animate-top-hide {
  -webkit-animation: nom-cascader-keyframe-top-hide .16s linear forwards;
  animation: nom-cascader-keyframe-top-hide .16s linear forwards;
}

.nom-cascader-animate-bottom-hide {
  -webkit-animation: nom-cascader-keyframe-bottom-hide .16s linear forwards;
  animation: nom-cascader-keyframe-bottom-hide .16s linear forwards;
}

@-webkit-keyframes nom-cascader-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

}

@keyframes nom-cascader-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-cascader-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

}

@keyframes nom-cascader-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-cascader-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
    opacity: 0;
  }
}

@keyframes nom-cascader-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
    opacity: 0;
  }
}

@-webkit-keyframes nom-cascader-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
    opacity: 0;
  }
}

@keyframes nom-cascader-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
    opacity: 0;
  }
}